<script setup lang="tsx">
import { onMounted, ref, reactive, watch } from 'vue'
import { useBar } from '@/hooks/chart'
import { HttpCodeEnum } from '@packages/share/enums'
import { getBarChantAPI } from '@/api/vulnerability/stat/index'
const emit = defineEmits(['upBardate'])
const { options } = useBar()
const chartRef = ref()
const MapValue = reactive({
  country: ''
})
const name = ref('')
// 绑定接收：时间
const props = defineProps({
  time: {
    type: Object,
    required: true,
    default: () => {}
  }
})
// 柱状图初始化
const init = () => {
  chartRef.value.loadingChart(true)
  chartRef.value.initChart()
  chartRef.value.clickChart(mapClick)
  getInfo(false)
}
// 接收国家名
const show = (value: string) => {
  MapValue.country = value
  name.value = ''
  value && getInfo(true)
}
// 参数合并
const _parameter = () => {
  return { ...props.time, ...MapValue }
}
// 柱状图请求
const getInfo = (flag: boolean) => {
  getBarChantAPI(_parameter()).then((res) => {
    let { data, code } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      options.xAxis.data = data.x
      options.series[0].data = data.y
      // flag?更新|初始化
      flag ? chartRef.value.updateChart() : chartRef.value.initChart()
      // 未选择省份默认返回第一个省
      // if (name.value == '') {
      //   emit('upBardate', data.x[0])
      // }
    }
  })
}
// 柱状图点击事件-抛出地区名
const mapClick = (e: any) => {
  name.value = e.name
  emit('upBardate', e.name)
}
// 侦听time变化
watch(props.time, () => {
  getInfo(true)
})
onMounted(() => {
  init()
})
defineExpose({ show })
</script>
<template>
  <div class="chart-content">
    <jmp-chart ref="chartRef" v-model:option="options"></jmp-chart>
  </div>
</template>
<style lang="scss" scoped></style>
